import React, { useEffect, useRef, useState } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { Tag, Card, Button, Popover } from 'antd';
import { priceType_status, liveType_status } from '@/common/contact';
import { connect, history } from 'umi';
import PopImgShow from '@/components/PopImgShow';
import DeleteModel from './components/DeleteModel';
import RenderShopCard from './components/RenderShopCard';
import Detail from './components/Details';
import { directLiveLink } from '@/common/historyLinkShop';
import SortableGallery from '@/components/ShareImgCollect';
import ModalPrice from '@/components/ModalPrice';
import ShareApp from '@/components/ShareApp';
const DirectLive = (props) => {
  const { loading, list, dispatch } = props;
  const { location = {} } = history;
  const { query = {} } = location;
  const { id, type = 'list' } = query;
  const [visible, setVisible] = useState(false);
  const [shareVisible, setShareVisible] = useState(false);
  const [priceVisible, setPriceVisible] = useState(false);
  const [deleteVisible, setDeleteVisible] = useState(false);
  useEffect(() => {
    if (type === 'detail') {
      setVisible({
        show: true,
        detail: {
          id,
        },
      });
    }
  }, []);

  const btnExtra = [
    {
      text: '新建直播',
      onClick: () => {
        history.push({
          pathname: '/marketingModule/createDirectLive',
        });
      },
    },
  ];
  const searchItems = [
    { label: '关键词', name: 'keyword' },
    {
      label: '付费类型',
      name: 'priceType',
      type: 'select',
      select: {
        free: '免费',
        money: '付费',
      },
    },
    {
      label: '上架状态',
      name: 'status',
      type: 'select',
      select: {
        0: '已下架',
        1: '已上架',
      },
    },
    {
      label: '直播状态',
      name: 'liveStatus',
      type: 'select',
      select: {
        0: '暂未开始',
        1: '直播中',
        2: '已结束',
      },
    },
    { label: '直播类型', type: 'select', name: 'liveType', select: liveType_status },
    {
      label: '是否独立销售',
      name: 'showFlag',
      type: 'select',
      select: {
        0: '否',
        1: '是',
      },
    },
  ];
  const childRef = useRef();
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const handleReload = () => {
    childRef.current.reloadData();
  };
  const getColumns = [
    {
      title: '直播名称',
      dataIndex: 'goodsName',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (e) => {
        return <PopImgShow url={e}></PopImgShow>;
      },
    },
    {
      title: '直播类型',
      dataIndex: 'liveType',
      render: (e) => {
        return liveType_status[e];
      },
    },
    {
      title: '付费类型',
      dataIndex: 'priceType',
      render: (e) => {
        return priceType_status[e];
      },
    },
    {
      title: '售价',
      dataIndex: 'price',
      render: (e, record) => {
        return e ? (
          <Button
            type="link"
            onClick={() => {
              setPriceVisible({
                show: true,
                details: record,
              });
            }}
          >
            {e}
          </Button>
        ) : (
          '--'
        );
      },
    },
    {
      title: '内含商品',
      dataIndex: 'packageGoodsAmount',
      render: (e, record) => {
        return e ? (
          <Popover
            placement="bottom"
            content={<RenderShopCard data={record.goodsPackageList}></RenderShopCard>}
          >
            {' '}
            <Button type="link">{e}</Button>
          </Popover>
        ) : (
          '--'
        );
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
    },
    {
      title: '上架状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '已下架',
          1: '已上架',
        }[e];
      },
    },
    {
      title: '是否独立销售',
      dataIndex: 'showFlag',
      render: (e) => {
        return {
          0: '否',
          1: '是',
        }[e];
      },
    },
    {
      title: '直播状态',
      dataIndex: 'liveStatus',
      render: (e) => {
        return {
          0: '暂未开始',
          1: '直播中',
          2: '已结束',
        }[e];
      },
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          auth: true,
          title: '配置',
          click: () => {
            directLiveLink({
              dispatch: dispatch,
              query: {
                id: val,
                type: 'detail',
              },
            });
          },
        },
        {
          auth: true,
          title: '分享',
          click: () => {
            setShareVisible({
              show: true,
              detail: record,
            });
          },
        },
        {
          auth: true,
          title: '编辑',
          click: () => {
            dispatch({
              type: 'login/findAccessId',
              payload: {
                pathname: '/marketingModule/createDirectLive',
                query: {
                  id: val,
                },
              },
            });
          },
        },
        {
          auth: true,
          title: '复制',
          click: () => {
            dispatch({
              type: 'login/findAccessId',
              payload: {
                pathname: '/marketingModule/createDirectLive',
                linkPush: 'open',
                query: {
                  id: val,
                  handleType: 'coby',
                },
              },
            });
          },
        },
        {
          auth: true,
          title: record.status === '0' ? '上架' : '下架',
          click: () => {
            dispatch({
              type:
                record.status === '0'
                  ? 'liveStreaming/fakeUpDirectLiveGoods'
                  : 'liveStreaming/fakeDownDirectLiveGoods',
              payload: { goodsIdList: [val] },
              callback: () => {
                handleReload();
              },
            });
          },
        },
        {
          title: '删除',
          click: () => {
            setDeleteVisible({
              show: true,
              detail: record,
            });
          },
        },
      ],
    },
  ];
  if (visible) {
    return (
      <Detail
        dispatch={dispatch}
        handleCallback={handleReload}
        onClose={() => setVisible(false)}
        visible={visible}
      ></Detail>
    );
  } else {
    return (
      <>
        <TableDataBlock
          cRef={childRef}
          cardProps={{ title: '直播管理' }}
          btnExtra={btnExtra}
          loading={loading}
          searchItems={searchItems}
          columns={getColumns}
          params={{
            withPackageFlag: '1',
            withContainFlag: '1',
          }}
          rowKey={(record) => `${record.id}`}
          dispatchType="liveStreaming/fetchDirectLive"
          {...list}
        ></TableDataBlock>
        <DeleteModel
          handleCallback={handleReload}
          onClose={() => setDeleteVisible(false)}
          visible={deleteVisible}
        ></DeleteModel>
        <ShareApp visible={shareVisible} onClose={() => setShareVisible(false)}></ShareApp>
        <ModalPrice
          handleReload={handleReload}
          visible={priceVisible}
          onClose={() => setPriceVisible(false)}
        ></ModalPrice>
      </>
    );
  }
};
export default connect(({ loading, liveStreaming }) => ({
  list: liveStreaming.directLiveList,
  loading: loading.models.liveStreaming,
}))(DirectLive);
